<template>
  <div class="box">
    <ContentTitle :info="ctInfo" />
    <!-- 设备概要 监控 公共 -->
    <div class="mainContent">
      <PreView class="fg1" />
      <!-- 公共 -->
      <el-card class="box-card card-g">
        <div slot="header" class="clearfix">
          <span class="f-l">公共</span>
          <el-tooltip
            class="item"
            effect="dark"
            content="统计当前帐号下，绑定的网关和传感器节点的总数量。"
            placement="left"
          >
            <span class="iconfont icon-askoutline"></span>
          </el-tooltip>
        </div>
        <ul class="infoList">
          <li>
            <p>
              <span class="iconfont icon-info"></span>
              <span>senseCAP V3.0</span>
            </p>
            <span>2020-02-13 14:28:07</span>
          </li>
          <li>
            <p>
              <span class="iconfont icon-info"></span>
              <span>senseCAP V3.0</span>
            </p>
            <span>2020-02-13 14:28:07</span>
          </li>
        </ul>
      </el-card>
    </div>
    <!-- 数据可视化 -->
    <Chart />
  </div>
</template>

<script>
import PreView from "./PreView.vue";
import Chart from "./Chart.vue";
import ContentTitle from '@/components/ContentTitle';
export default {
  name: "dashboard",
 data(){
   return{
     ctInfo:{
       text: "仪表盘",
        msg: "设备概览和传感数据可视化。",
     }
   }
 },
  components: { PreView, Chart ,ContentTitle},
};
</script>

<style scoped lang="less">
.card-top {
  margin-bottom: 10px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
}
// 设备概览
.mainContent {
  display: flex;
  justify-content: space-between;
  PreView {
    width: 60%;
  }
  .card-g {
    width: 20%;
  }
}
//公共
.f-l {
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}
.infoList {
  li {
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    p {
      margin-right: 2px;
      span:nth-of-type(1) {
        color: #06d106;
        font-weight: 600;
      }
    }
  }
}
</style>
